import React, { Component, Suspense, lazy } from 'react';
import { HashRouter, Switch, Route, withRouter } from 'react-router-dom';
//import createBrowserHistory from 'history/createBrowserHistory';

import installation from '@/pages/installation';
import quickstart from '@/pages/quickstart';
import aaa from 'ygbh/aaa/demo/index';
import aab from 'ygbh/aab/demo/index';

import divider from 'ygbh/divider/demo/index';
import tag from 'ygbh/tag/demo/index';
import icon from 'ygbh/icon/demo/index';
import avatar from 'ygbh/avatar/demo/index';
import badge from 'ygbh/badge/demo/index';
import button from 'ygbh/button/demo/index';
import input from 'ygbh/input/demo/index';
import select from 'ygbh/select/demo/index';
import grid from 'ygbh/grid/demo/index';
import layout from 'ygbh/layout/demo/index';
import affix from 'ygbh/affix/demo/index';
import breadcrumb from 'ygbh/breadcrumb/demo/index';
import pagination from 'ygbh/pagination/demo/index';
import steps from 'ygbh/steps/demo/index';

import checkbox from 'ygbh/checkbox/demo/index';
import radio from 'ygbh/radio/demo/index';
import rate from 'ygbh/rate/demo/index';
import slider from 'ygbh/slider/demo/index';
import SwitchDemo from 'ygbh/switch/demo/index';
import card from 'ygbh/card/demo/index';
import collapse from 'ygbh/collapse/demo/index';
import descriptions from 'ygbh/descriptions/demo/index';


const layoutRouter1 = [
    { path:"/", component: installation,},
    { path:"/component/installation", component: installation,},
    { path:"/component/quickstart", component: quickstart,},
    { path:"/component/aaa", component: aaa,},
    { path:"/component/aab", component: aab,},
];
const layoutRouter2 = [
    { path:"/component/divider", component: divider,},
    { path:"/component/tag", component: tag,},
    { path:"/component/icon", component: icon,},
    { path:"/component/avatar", component: avatar,},
    { path:"/component/badge", component: badge,},
    { path:"/component/button", component: button,},
    { path:"/component/input", component: input,},
    { path:"/component/select", component: select,},
    { path:"/component/grid", component: grid,},
    { path:"/component/layout", component: layout,},
    { path:"/component/affix", component: affix,},
    { path:"/component/breadcrumb", component: breadcrumb,},
    { path:"/component/pagination", component: pagination,},
    { path:"/component/steps", component: steps,},

    { path:"/component/checkbox", component: checkbox,},
    { path:"/component/radio", component: radio,},
    { path:"/component/rate", component: rate,},
    { path:"/component/slider", component: slider,},
    { path:"/component/switch", component: SwitchDemo,},
    { path:"/component/card", component: card,},
    { path:"/component/collapse", component: collapse,},
    { path:"/component/descriptions", component: descriptions,},
];


function RouteConfig (props:any) {
    return(
        <>
            <HashRouter>
                <Suspense fallback={<div>Loading...</div>}>
                    <Switch>
                        { layoutRouter1.map(item => <Route exact path={item.path}  component={item.component} key={item.path}/>) }
                        { layoutRouter2.map(item => <Route exact path={item.path}  component={item.component} key={item.path}/>) }
                    </Switch>
                </Suspense>
            </HashRouter>
        </>
    )
};

export default RouteConfig